<template>
	<div class="content">
		<orderHeader msg="咚咚哒哒美食店" :state="1"></orderHeader>

		<span class="font-size-20">核定订单信息</span>
		<div class="order-context border-shadow1">
			<div class="order-context-detail">
				<div class="order-context-detail-first">
					<div class="order-context-detail-first-title">
						<span class="font-size-18">收货人信息</span>
						<span class="font-size-17 delivery-adress-add" @click="addAdress">新增地址</span>
					</div>
					<div class="order-context-detail-first-detail">
						<div :class="consigneeItemClass === index? 'consignee-item consignee-item-selected' : 'consignee-item'" @click="consigneeItemClick(index)"
						 v-for="(address,index) of addressList" :key="address.address_id">
							<div>
								<div>
									<span>{{address.receiver_name}}</span>
								</div>
								<div class="hr"></div>
								<div>
									<span>{{address.receiver_address}}</span>
								</div>
								<div>
									<span>{{address.receiver_telephone}}</span>
								</div>
							</div>
							<div title="修改地址" class="consignee-item-update" v-show="consigneeItemClass === index" @click="modify(address)">修改</div>
							<div class="default-tip" v-show="address.defult_flag === 1">默认地址</div>
							<div title="设置为默认地址" :class="consigneeItemClass === index && address.defult_flag !== 1? 'set-default' : 'dispaly-none'"
							 @click="setDefault(address)">设为默认</div>
						</div>
					</div>
				</div>
				<div class="hr"></div>
				<div class="order-context-detail-second">
					<span class="font-size-18">支付方式</span>
					<div>
						<div :class="paymentItemClass === 1? 'payment-border payment-selected' : 'payment-border'" @click="changePayment(1)">
							在线支付
						</div>
						<div :class="paymentItemClass === 2? 'payment-border payment-selected' : 'payment-border'" @click="changePayment(2)">
							货到付款
						</div>
					</div>
				</div>
				<div class="hr"></div>
				<div class="order-context-detail-third">
					<span class="font-size-18">确认订单信息</span>
					<div>
						<div class="order-item" v-for="food of foodList">
							<div>
								<img :src="'http://localhost:8080/res/'+food.food.food_img" />
							</div>
							<div>
								<span :title="food.food.food_name">{{food.food.food_name}}</span>
								<span :title="food.detail_attach">{{food.detail_attach}}</span>
								<span>{{'×'+food.food_amount}}</span>
							</div>
							<div><span>{{'￥'+food.total_cost}}</span></div>
						</div>
					</div>
					<div class="other-and-summary">
						<div class="packing-expense">
							<div><span>包装费</span></div>
							<div><span>￥2</span></div>
						</div>
						<div class="freight">
							<div><span>运费</span></div>
							<div><span>￥2</span></div>
						</div>
						<div class="order-vip" v-show="vipLv">
							<div><span>vip{{vipLv}}折扣</span></div>
							<div><span>{{vipDiscount}}</span></div>
						</div>
						<div class="red-packet">
							<div><span>红包</span></div>
							<div><span style="margin-right: 20px;">{{faceValue}}</span><span class="cursor-pointer" @click="selectRedBagClick"
								 style="font-family: YouYuan;">{{redbagSelect}}</span></div>
						</div>
						<div class="integral">
							<div><span>积分</span><span style="margin-left: 20px;">{{point}}</span></div>
							<div><span style="margin-right: 20px;">{{integralValue}}</span><span class="cursor-pointer" @click="useIntegralClick"
								 style="font-family: YouYuan;">{{useIntegral? '不使用' : '使用'}}</span></div>
						</div>
						<div class="discount">
							<div><span>已优惠￥{{discount}}</span></div>
						</div>
						<div class="summary">
							<div><span>共计</span><span style="color: orangered;font-size: 22px;">￥{{orderTruePrice.toFixed(2)}}</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="order-confirm">
			<div>
				<el-button @click="submitOrderClick" type="primary">提交订单</el-button>
			</div>
		</div>
		<!-- 修改地址弹出框 -->
		<div>
			<el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" center>
				<el-form :model="formUserAddress" :rules="rules" ref="ruleForm" label-width="120px" size="medium" label-position="left">

					<el-form-item label="收货人姓名" prop="name">
						<el-input v-model="formUserAddress.receiver_name" style="width:150px"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="telephone">
						<el-input v-model="formUserAddress.receiver_telephone" style="width:150px"></el-input>
					</el-form-item>

					<el-form-item label="详细地址" prop="address">
						<el-input type="textarea" v-model="formUserAddress.receiver_address" style="width:300px"></el-input>
					</el-form-item>

					<el-form-item label="选择标签" prop="label">
						<el-select v-model="formUserAddress.receiver_label" placeholder="请选择活动区域">
							<el-option label="家" value="家"></el-option>
							<el-option label="学校" value="学校"></el-option>
							<el-option label="公司" value="公司"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="设置为默认地址" prop="select">
						<el-switch v-model="selected"></el-switch>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="modifysubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<!-- 红包列表 -->
		<div>
			<el-dialog title="可用红包" :visible.sync="dialogRedbagVisible" width="800px" center>
				<el-table :data="redbaglist">
					<el-table-column property="create_date" label="获得时间" width="270"></el-table-column>
					<el-table-column property="valid_time" label="期限/天" width="180"></el-table-column>
					<el-table-column property="redBag.face_value" label="金额/元" width="150"></el-table-column>
					<el-table-column label="使用" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="useRedbagClick(scope.row)">使用</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="margin: 10px 20px 0 0;text-align: right;">
					<el-button size="mini" @click="useRedbagClick()">不使用红包</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import orderHeader from "@/components/Order/OrderHeader/OrderHeader.vue"
	import OrderService from "./OrderService.js"
	import tools from "@/tools/tools.js"

	export default {
		name: "Order",
		data() {
			return {
				consigneeItemClass: 0,
				paymentItemClass: 1,
				addressList: [],

				selected: true,
				title: '',
				open: 0, //判断是地址增加按钮还是修改按钮点击。
				rules: {
					receiver_name: [{
							required: true,
							message: '请输入收货人姓名',
							trigger: 'blur'
						},
						{
							min: 0,
							max: 25,
							message: '长度不超过25个字符',
							trigger: 'blur'
						}
					],
					receiver_address: [{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur'
					}],
					receiver_telephone: [{
						required: false,
						message: '请填写联系方式',
						trigger: 'blur'
					}]
				},
				dialogFormVisible: false,
				//地址修改弹出框中的form
				formUserAddress: {
					address_id: null,
					user_id: null,
					receiver_name: '',
					receiver_label: '',
					receiver_address: '',
					receiver_telephone: '',
					defult_flag: 0,
					is_delete: 1,
				},
				formLabelWidth: '120px',

				dialogRedbagVisible: false,
				redbaglist: [], //红包
				redbagSelect: '请选择',
				faceValue: '',
				faceValueNumber: 0,
				redBagRecordId: null,

				useIntegral: false,
				integralValue: '',
				integralValueNumber: 0,

				foodList: [],
				totalPrice: 0,

				point: '', //用户积分
				vipLv: '', //vip等级
				vipDiscount: 1,
			}
		},
		computed: {
			discount() {
				return this.faceValueNumber + this.integralValueNumber + parseFloat((this.totalPrice*(1-this.vipDiscount)).toFixed(2));
			},
			totalAndOtherPrice() {
				return this.totalPrice + 2 + 2;
			},
			orderTruePrice() {
				return this.totalAndOtherPrice - this.discount;
			},
		},
		components: {
			orderHeader
		},
		created() {
			this.getNowAllAdress();
			this.foodList = this.$route.params.sel;
			console.log(this.foodList);
			this.totalPrice = parseInt(this.$route.params.totalPrice);
			OrderService.getcurrentvipService(res=>{
				console.log(res);
				this.point = res.customeruser.user_point;
				this.vipLv = res.vip.vip_lv;
				if(this.vipLv == 1){
					this.vipDiscount = 1;
				}else if(this.vipLv == 2){
					this.vipDiscount = 0.95;
				}else if(this.vipLv == 3){
					this.vipDiscount = 0.9;
				}
			})
		},
		methods: {
			submitOrderClick() {
				let myDate = new Date();
				let order_create_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", myDate);
				let order_address = this.addressList[this.consigneeItemClass].address_id;
				let good_order_detail_list = this.foodList.map(obj => {
					let newObj = {};
					newObj.food_name = obj.food.food_name;
					newObj.food_id = obj.food_id;
					newObj.food_amount = obj.food_amount;
					newObj.food_total = obj.total_cost;
					newObj.detail_attach = obj.detail_attach;
					return newObj;
				});
				console.log(good_order_detail_list);
				//购物车里的菜品id集合
				let shoppingCartIdList = this.foodList.map(obj=>{
					return obj.shopping_cart_detail_id;
				});
				console.log(shoppingCartIdList);
				let goodOrder = {
					good_order: {
						order_create_time: order_create_time,
						order_pay_time: '',
						carrier: '',
						carrier_telephone: '',
						order_original_price: this.totalPrice + 2 + 2,
						order_true_price: this.orderTruePrice,
						order_remark: '',
						order_address: order_address,
						pay_style: null,
						status: 11,
					},
					good_order_detail_list: good_order_detail_list,
				};
				//红包使用
				if (this.redBagRecordId != null) {
					OrderService.redbagUseService({
						red_bag_id: this.redBagRecordId,
					}, res => {
						console.log(res);
					});
				}
				OrderService.creategoodorderService(goodOrder, res => {
					// console.log(res);
					//积分使用
					if(this.useIntegral){
						OrderService.insertPointDetailService({
							order_id: res.order.order_id,
							user_true_name: res.order.order_owner_name,
							point_change_amount: Math.floor(res.order.order_true_price/10),//10元 1积分,
							point_change_id: 52,
						},res=>{
							// console.log(res);
						})
					};
					
					//购物车删除
					OrderService.removeInService(shoppingCartIdList,res=>{
						console.log(res);
					});
					this.$router.push({
						name: 'Payment',
						params: {
							order_id: res.order.order_id,
						}
					});
				});
			},
			consigneeItemClick(index) {
				this.consigneeItemClass = index;
			},
			setDefault(address) {
				address.defult_flag = 1;
				OrderService.modifyAddressService(address, res => {
					// console.log(res);
					this.getNowAllAdress();
				})
			},
			changePayment(index) {
				this.paymentItemClass = index;
			},
			//获得当前用户所有地址
			getNowAllAdress() {
				OrderService.getNowAllService(res => {
					this.addressList = res.AddressList;
					this.consigneeItemClass = (res.AddressList || []).findIndex((address) => address.defult_flag === 1);
				})
			},
			//新增收货地址
			addAdress() {
				this.title = '新增收货地址';
				this.open = 0;
				this.dialogFormVisible = true;

				this.selected = false;

				this.formUserAddress.address_id = null;
				this.formUserAddress.user_id = null;
				this.formUserAddress.receiver_name = '';
				this.formUserAddress.receiver_label = '';
				this.formUserAddress.receiver_telephone = '';
				this.formUserAddress.receiver_address = '';
			},
			//修改收货地址
			modify(address) {
				this.title = '修改收货地址';
				this.open = 1;
				this.dialogFormVisible = true;

				this.selected = address.defult_flag == 1;

				this.formUserAddress.address_id = address.address_id;
				this.formUserAddress.defult_flag = address.defult_flag;
				this.formUserAddress.user_id = address.user_id;
				this.formUserAddress.receiver_name = address.receiver_name;
				this.formUserAddress.receiver_label = address.receiver_label;
				this.formUserAddress.receiver_telephone = address.receiver_telephone;
				this.formUserAddress.receiver_address = address.receiver_address;

			},
			//地址添加或修改确定
			modifysubmit() {
				this.dialogFormVisible = false;
				//将el-switch转换成defult_flag
				if (this.selected) {
					this.formUserAddress.defult_flag = 1;
				} else {
					this.formUserAddress.defult_flag = 0;
				}
				if (this.open == 0) { //添加地址
					OrderService.addAddressService(this.formUserAddress, res => {
						// console.log(res);
						this.getNowAllAdress();
					});
				} else if (this.open == 1) { //修改地址
					OrderService.modifyAddressService(this.formUserAddress, res => {
						// console.log(res);
						this.getNowAllAdress();
					})
				}
			},
			//红包选择
			selectRedBagClick() {
				this.dialogRedbagVisible = true;
				OrderService.getRedbagByStateService({
					redbag_state: 61
				}, res => {
					// console.log(res);
					this.redbaglist = res.redbaglist;
				});
			},
			//红包使用
			useRedbagClick(row) {
				this.dialogRedbagVisible = false;
				if (row) {
					this.redbagSelect = '更换';
					this.faceValue = '￥' + row.redBag.face_value;
					this.faceValueNumber = row.redBag.face_value;
					this.redBagRecordId = row.red_bag_record_id;
				} else {
					this.redbagSelect = '请选择';
					this.faceValue = '';
					this.faceValueNumber = 0;
					this.redBagRecordId = null;
				}
			},
			//积分使用
			useIntegralClick() {
				if (this.point >= 100) {
					if (!this.useIntegral) {
						this.integralValue = '已减￥10';
						this.useIntegral = true;
						this.integralValueNumber = 10;
					} else {
						this.integralValue = '';
						this.useIntegral = false;
						this.integralValueNumber = 0;
					}
				} else {
					this.$message({
						message: '积分不足100，不能使用积分',
						type: 'warning'
					});
				}

			}

		}
	}
</script>

<style lang="less">
	@import "./Order.less";
	@import "../../style/Common.less";

	.order-context {
		margin-top: 3px;
	}

	.order-context-detail {
		padding: 10px;

		.order-context-detail-first {
			margin-bottom: 10px;

			.order-context-detail-first-title {
				display: flex;
				justify-content: space-between;

				.delivery-adress-add:hover {
					cursor: pointer;
					color: orangered;
				}
			}

			.order-context-detail-first-detail {
				display: flex;
				flex-wrap: wrap;
			}
		}

		.order-context-detail-second {
			margin-bottom: 10px;

			>div {
				display: flex;
				margin-top: 5px;

				>div {
					margin-right: 15px;
				}
			}
		}

		.order-context-detail-third {
			border: 1px solid #e6e6e6;
			padding: 5px;
			box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);

			.order-item {
				width: 98%;
				height: 100px;
				padding-top: 5px;
				padding-bottom: 2px;
				display: flex;
				align-items: center;
				margin: 0 auto;

				div:nth-child(1) {
					width: 100px;

					>img {
						display: block;
						width: 100px;
						height: 100px;
					}
				}

				div:nth-child(2) {
					margin-left: 20px;
					margin-top: 0;
					height: 100px;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					>span {
						&:nth-child(1) {
							font-size: 20px;
							width: 400px;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						&:nth-child(2) {
							font-size: 15px;
							width: 400px;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}

						&:nth-child(3) {
							font-size: 14px;
						}
					}
				}

				div:nth-child(3) {
					margin-left: auto;
					font-size: 20px;
				}
			}

			.other-and-summary {
				width: 98%;
				margin: 0 auto;

				>div {
					display: flex;
					justify-content: space-between;
					margin-top: 15px;
				}

				.discount,
				.summary {
					>div {
						margin-left: auto;
					}
				}

				.summary {
					font-size: 20px;
				}
			}
		}
	}

	.order-confirm {
		margin: 10px 0 20px;
		text-align: right;
	}

	.consignee-item {
		position: relative;
		border: 2px dotted lightgray;
		width: 20%;
		height: 95px;
		margin: 5px 1.3%;
		padding: 10px;
		text-align: center;
		cursor: pointer;

		>div {
			div:nth-child(1) {
				font-size: 20px;
			}

			div:nth-child(3) {
				font-size: 15px;
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			div:nth-child(4) {
				font-size: 14px;
			}
		}

		.consignee-item-update {
			position: absolute;
			left: 8px;
			bottom: 5px;
			font-size: 13px;
			color: #c97;
		}

		.default-tip {
			position: absolute;
			right: 0;
			top: 0;
			font-size: 12px;
			background: #ccc;
			color: #fff;
		}


		&:hover {
			border-color: orangered;

			.set-default {
				position: absolute;
				display: block;
				right: 0;
				top: 0;
				font-size: 12px;
				background: #ccc;
				color: #fff;
			}
		}

	}

	.set-default {
		display: none;
	}

	.payment-border {
		border: 1px solid lightgray;
		padding: 5px;
		cursor: pointer;
	}

	.payment-selected {
		border-color: red;
	}

	.consignee-item-selected {
		background: url(../../assets/img/consigneeSelected.png) no-repeat;
		background-position: 190px 82px;
		border-color: orangered;
	}
</style>
